	// Spreadsheet where all the people data is stored
	var SS_ID = "1xD_izC1654sS0VJePugxJDgDym1AcOxhzRErWFwCRvA"; //BA_employees

	/*
	 * @return UiInstance Application created using UI Services
	 *                    which includes all the widgets and callback handler hooks
	 */
	function doGet(e) {
		var app = UiApp.createApplication();//.setTitle("VIEW PROFILES APPLICATION");

		//create form widgets
		createWidgets_(app)
		return app;
  
  
		/* Create dropdown with selector for department, such that when one selects dept and clicks get/submit/okay, we just retrieve a list of the of employees in that dept. */
	}

	function createWidgets_(container){
		Logger.log("createWidgets called");
		var vPanel = container.createVerticalPanel().setId('vPanel').setStyleAttributes({border:'1px solid blue', height:'100%', width:'100%'});
			vPanel.setHorizontalAlignment(UiApp.HorizontalAlignment.CENTER);
  
		var prompt = container.createLabel("Choose your department then click 'Get Profiles' to get staff contacts").setId('prompt');
		var prompt2 = container.createLabel("Choose your department then click submit to get staff contacts");
			prompt.setStyleAttributes({color:'blue', fontWeight:'900', fontSize:'16px', fontFamily:'comic sans ms'});
      
		var deptsList = container.createListBox().setName('deptsList').setId('deptsList');
			deptsList.setStyleAttributes({width: '165px', border:'1px solid green'});
			deptsList.addItem('-- Choose Department--');
			deptsList.addItem('Credit');
			deptsList.addItem('Card Center');
			deptsList.addItem('Directors & Management ');
			deptsList.addItem('Finance and Admin');
			deptsList.addItem('Human Resource');
			deptsList.addItem('IT');
			deptsList.addItem('Internal Audit');
			deptsList.addItem('Islamic Banking');
			deptsList.addItem('Marketing');
			deptsList.addItem('Operations');
			deptsList.addItem('Relationship');
			deptsList.addItem('Treasury');
			deptsList.addItem('Value Added Services(VAS)');
			deptsList.addItem('HP(Hire Purchase)');
  
		var btnGetProfiles = container.createButton('Get Profiles').setStyleAttributes({borderRadius:'5px'});
  
		var profsHandler = container.createServerHandler("getDeptProfiles");
			btnGetProfiles.addClickHandler(profsHandler);
  
		var scrollPanel = container.createScrollPanel().setId('scrollPanel').setHeight('90%').setWidth('90%')
		.setStyleAttributes({border:'1px dotted red', position:'absolute' ,top:'5px', backgroundColor:'#48BEEF', display:'none'});
		//, display:'none'
		var innerPanel  = container.createVerticalPanel().setId('innerPanel')
		.setStyleAttributes({border:'1px solid green', backgroundColor:'#000', width:'80%', height:'80%'});
  
		var backButtonHolder = container.createHorizontalPanel().setId('backButtonHolder');
		var backButton = container.createButton("Go Back").setId('backButton');
			backButtonHolder.add(backButton);
		innerPanel.add(backButtonHolder);
  
		var goBackHandler = container.createServerHandler('goBackToDeptList');
		backButton.addClickHandler(goBackHandler);
  
		profsHandler.addCallbackElement(deptsList);
		goBackHandler.addCallbackElement(backButton);
		vPanel.add(prompt);
		//vPanel.add(prompt2);
		vPanel.add(deptsList);
		vPanel.add(btnGetProfiles);
		vPanel.add(scrollPanel);
		scrollPanel.add(innerPanel);
      
  container.add(vPanel);
}



function getDeptProfiles(e){
	var app = UiApp.getActiveApplication();
    var vPanel = app.getElementById('vPanel');
        //vPanel.clear();
        
    var prompt = app.getElementById('prompt');
  
    //get the name of the selected department
	var deptName = e.parameter.deptsList;
	Logger.log('Department has been taken...');
  
	//Scan sheet into JS object
	var SS = SpreadsheetApp.openById(SS_ID);
	var sheet = SS.getSheetByName('all');  
	var dataRange = sheet.getDataRange();
	var empObj = dataRange.getValues();
    
	var scrollPanel = app.getElementById('scrollPanel');
		scrollPanel.setStyleAttributes({display:'block'});
  
	var innerPanel = app.getElementById('innerPanel');
	Logger.log('------ GET SOME EMP DATA FROM SHEET--');
	
	for(var i = 0; i<empObj.length; i++ ){
		if(empObj[i][4] == deptName){
			Logger.log(' ' + empObj[i][0]);
			Logger.log('\n');
			var email = app.createLabel().setStyleAttributes({color:'#FFF'}).setText(empObj[i][0]);
			innerPanel.add(email);
		}
    }
  
	//Loop through JS object getting profiles that have the selected department and build interface with them
  
  
	/*ar parentPanel = app.getElementById('parentPanel');
        parentPanel.clear();
	// Logger.log('Department Name is: '+ deptName);
    	
     createWidgets_(app, deptName);
     Logger.log('Just Called createWidgets_ with dept: '+ deptName);
	//CacheService.getPrivateCache().put('whatDept', deptName); */
    Logger.log('Department Name is: '+ deptName);
    prompt.setText("Department selected is: " +deptName);
    Logger.log('The text has been set....');
	return app;
}

function goBackToDeptList(e){
	var app = UiApp.getActiveApplication();
	var innerPanel = app.getDocumentById('innerPanel');
	var scrollPanel = app.getDocumentByName('scrollPanel');
	
	//empty the inner panel first
	innerPanel.clear();
	
	//hide the parent
	scrollPanel.setStyleAttributes({display: 'none'});
	
	return app;
}